import React, {useEffect, useState} from "react";
import axios from "axios";
import {Card, Col, List, PageHeader, Row} from "antd";

import _ from 'lodash';  // 用于处理数据格式

export default function News() {
    const [allDataList, setAllDataList]= useState([]);
    useEffect(()=>{
        axios.get('/api/news?publishState=1&_expand=category').then(response=>{
            let groupData= _.groupBy(response.data, item=>item.category.title); // 将响应数据按分类标题进行分组
            let dataList= Object.entries(groupData);  // 转为二维数组
            setAllDataList(dataList);
            // console.log(dataList)
        });
    }, [])

    return (
        <div style={{width: "95%", margin: "0 auto", padding: "0 0 40px 0"}}>
            <PageHeader title="全球大新闻" subTitle="查看新闻"/>

            <div>
                <Row gutter={[16,16]}>
                    {
                        allDataList.map(data=>(
                            <Col span={8} key={data[0]}>
                                <Card title={data[0]} bordered={true} hoverable={true} style={{height: "320px"}}>
                                    <List size="small" dataSource={data[1]}
                                          pagination={{pageSize: 4}}
                                          renderItem={item => <List.Item><a href={`#/detail/${item.id}`}>{item.title}</a></List.Item>}
                                    />
                                </Card>
                            </Col>
                        ))
                    }

                </Row>
            </div>
        </div>
    )
}
